﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx.cs" Inherits="Zuoye.Register" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/font.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        function sendAjax() {
            //1.获取用户输入的内容
            var name = document.getElementById("txtName").value;
            //2.发ajax请求
            var xhttp = new XMLHttpRequest();//创建对象
            //配置异步访问对象相关请求参数  参数1：http请求方式  参数2:接口地址  参数3：异步请求
            xhttp.open("GET", "CheckAccountHandler.ashx?account=" + name, true);
            //ajax请求发送
            xhttp.send();
            //回调函数
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    //业务代码
                    var result = xhttp.responseText;//获取接口的响应文本
                    //true:账号能用  span标签隐藏
                    var sp = document.getElementById("sp1");
                    if (result == "true") {
                        sp.style.display = "none";
                    }
                    //false:账号不能用 span标签显示
                    else {
                        sp.style.display = "block";
                    }
                }
            }
        }
        //检测密码是否相同
        function checkPwd() {
            var pwd = document.getElementById("txtPwd");
            var rpwd = document.getElementById("txtRPwd");
            if (pwd.value != rpwd.value) {
                alert('两次密码不一致，请检查！');
                return false;
            }
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div class="log_banner">
            <div class="inset">
                <h1>用户注册</h1>
                <p>Connect the real world and the internet world!</p>
            </div>

        </div>
        <!--注册开始-->
        <div id="body">
            <div id="reg_box" class="left">
                <div method="post" action="/" role="form" autocomplete="on">
                    <div class="my-group">
                        <span class="left">姓名</span>
                        <asp:TextBox ID="txtName" runat="server" CssClass="form-control put1" placeholder="请输入用户名" MaxLength="14" onblur="sendAjax()" ></asp:TextBox><span id="sp1" style="color: red; display: none;">用户已存在</span>
                    </div>


                    <div class="my-group">
                        <span class="left">生日</span>
                        <asp:TextBox ID="txtBirth" runat="server" CssClass="form-control put1" placeholder="请输入生日" ></asp:TextBox>
                    </div>

                    <div class="my-group">
                        <span class="left">密码</span>
                        <asp:TextBox ID="txtPwd" runat="server" CssClass="form-control put1" placeholder="请输入密码" TextMode="Password" MaxLength="14"></asp:TextBox>
                    </div>

                    <div class="my-group">
                        <span class="left">重复密码</span>
                        <asp:TextBox ID="txtRPwd" runat="server" CssClass="form-control put1" placeholder="请重复密码" TextMode="Password" onblur="checkPwd()" MaxLength="14"></asp:TextBox>
                    </div>

                    <div class="my-group">
                        <span class="left">所在城市</span>
                        <asp:DropDownList ID="ddlCity" CssClass="form-control put1" runat="server">
                        </asp:DropDownList>

                    </div>

                    <div class="my-group">
                        <span class="left">性别</span>
                        <asp:RadioButtonList ID="rbtnGender" runat="server" CssClass=" form-control put1" RepeatDirection="Horizontal">
                            <asp:ListItem Value="1">男</asp:ListItem>
                            <asp:ListItem Value="2">女</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>

                    <div class="my-group" >
                        <span class="left" >头像</span>
                        <asp:FileUpload ID="fulImg" runat="server" /><asp:Image ID="Image1" runat="server" /><asp:Button ID="btnUpload" runat="server" Text="上传头像" OnClick="btnUpload_Click" />
                    </div>

                    <div class="my-group">
                        <span class="left">电话</span>
                        <asp:TextBox ID="txtPhone" CssClass="form-control put1" placeholder="电话" runat="server"></asp:TextBox>
                    </div>
                    <div class="my-group">
                        <span class="left">邮箱</span>
                        <asp:TextBox ID="txtEmail" CssClass="form-control put1" placeholder="邮箱" runat="server"></asp:TextBox>
                    </div>                    <div class="my-group">
                        <span class="left">QQ</span>
                        <asp:TextBox ID="txtQQ" CssClass="form-control put1" placeholder="QQ" runat="server"></asp:TextBox>
                    </div>

                    <div class="form-actions">
                        <p>
                            <asp:CheckBox ID="CheckBox1" type="checkbox" runat="server" Text="我已经仔细阅读并同意" /><a href="#" target="_blank">《服务条款》</a>中的相关事项。</p>
                        <asp:Button ID="btnRg" CssClass="btn-primary btn" runat="server" Text="注册康辉帐号" OnClick="btnRg_Click" />
                    </div>








                </div>

            </div>

            <div class="side_box right">
                <h2>帐号与您的设备</h2>
                <p>
                    感谢您的关注并准备注册为康辉用户。
                </p>
                <p>不想注册？ <a href="login.html"><i class="icon-weibo"></i>快速登录</a> </p>
                <p>
                    作为一家传感器云网络提供商，我们致力于将您身边的物体接入互联网，并使您能方便地通过互联网或者移动设备了解他们的状态、控制他们。除了我们提供的硬件设备外，您也可以设计自己的传感器硬件，并通过<a href="" target="_blank">开放API</a>免费接入。
                </p>

            </div>
        </div>
    </form>
</body>
</html>
